<template>
    <div>
      <m-header v-scroll-header="[0, 70, 580]"></m-header>
      <!-- bg-banner头部背景大图 -->
      <div class="bg-banner" :style="background.demo1">
        <div class="bg-box">
          <div class="logo" :style="background.logo">
            <div class="hoop1"></div>
            <div class="hoop2"></div>
            <div class="hoop3"></div>
          </div>
          <!-- 微力logo -->
          <div class="bg-content">
            <h1>微力科技实验室</h1>
            <p>Web开发、Android开发、Unity3D开发、美工设计。微力发展至今，已不仅是一个实验室，更多的是一个平台，一个提供编程开发、学习交流、技术分享、组建团队、创新创业的平台</p>
            <a href="javascript:void(0)" id="seemore">了解更多</a>
          </div>
        </div>
      </div><!-- bg-banner -->
      <!-- banner1四个方向 -->
      <div class="banner1">
        <h2>Profession Direction</h2>
        <hr>
        <router-link to="/web">
          <img src="../assets/picture/html5.png">
          <p>Web开发</p>
          <p>Web Develop</p>
        </router-link>
        <router-link to="/android">
          <img src="../assets/picture/andriod-icon.png">
          <p>Andriod开发</p>
          <p>Andriod Develop</p>
        </router-link>
        <a href="web.html">
          <img src="../assets/picture/unity_03.png">
          <p>Unity开发</p>
          <p>Unity 3D Develop</p>
        </a>
        <a href="web.html">
          <img src="../assets/picture/iconfont-photoshop.png">
          <p>Art开发</p>
          <p>Art Design</p>
        </a>
      </div><!-- banner1 -->

      <!-- banner2代码演示 -->
      <div class="banner2" :style="background.banner2" title="点击演示敲代码">
        <pre class="intro">
        &lt;!DOCTYPE html&gt;
        &lt;head&gt;
        &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
        &lt;meta name="viewport" content="width=1024"&gt;
        &lt;title&gt;Document&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/home.css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;script type=&quot;text/javascript&quot;&gt;
            $(document).ready(function(){
            document.write(&quot;feel the magic of the code&quot;);
        })
        &lt;/script&gt;
        &lt;/body&gt;
        &lt;/html&gt;
        </pre>
        <div class="banner2-point" :style="background['banner2-point']">
          <p>点击鼠标体会</p>
          <p>敲代码的快感</p>
        </div>
      </div><!-- banner2 -->

      <div class="banner3">
        <h2>Technology</h2>
        <!--  <p>使用最前沿的开发工具、学习最流行的开发技术、观看最高效的视频教程</p> -->
        <hr color="#c00">
        <div class="item">
          <a href="http://www.sublimetext.com/" title="神级代码编辑软件SublimeText,也是HTML和散文先进的文本编辑器" target="_blank" class="sublime" :style="background.a">神级代码编辑软件SublimeText,也是HTML和散文先进的文本编辑器</a>

          <a href="http://www.android.com" title="Android Studio 是一个Android集成开发工具" target="_blank" class="android" :style="background.a">Android Studio 是一个Android集成开发工具</a>

          <a href="http://www.unity.com" title="三维视频游戏、建筑可视化、实时三维动画" target="_blank" class="unity" :style="background.a" >Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具</a>
        </div>
        <div class="item">
          <a href="http://www.imooc.com" title="慕课网(IMOOC)是国内最大的IT技能学习平台" target="_blank" class="imooc" :style="background.a">慕课网(IMOOC)是国内最大的IT技能学习平台</a>
          <a href="http://www.jikexueyuan.com" title="极客学院是中国android开发在线学习平台" target="_blank" class="jkxy" :style="background.a">极客学院是中国android开发在线学习平台</a>
          <a href="http://edu.manew.com/" title="国内最大的Unity3D专业视频学习平台" target="_blank" class="manew" :style="background.a">国内最大的Unity3D专业视频学习平台</a>
        </div>
        <div class="item" style="border: none">
          <a href="https://github.com/github" title="GitHub是一个面向开源及私有软件项目的托管平台" target="_blank" class="github" :style="background.a">GitHub是一个面向开源及私有软件项目的托管平台</a>
          <a href="http://note.youdao.com/" title="有道云笔记，记录、管理、查看" target="_blank" class="youdao" :style="background.a">随时记录，笔记、云存储、印象笔记</a>
          <a href="http://www.adobe.com/cn/products/cs6/photoshop.html" title="Photoshop编修与绘图工具" target="_blank" class="ps" :style="background.a">Photoshop主要处理以像素所构成的数字图像</a>
        </div>
      </div>

      <!-- banner4图片背景 加入我们 -->
      <div class="banner4" :style="background['banner4-bg']">
        <a href="join.html" title="点击加入微力">加入我们</a>
        <p>使用最前沿的开发工具、学习最流行的开发技术、<br>观看最高效的视频教程</p>
      </div>

      <!-- banner5项目展示 -->
      <div class="banner5">
        <h2>Programs</h2>
        <hr>
        <a href="http://3dyunxie.com" class="item5">
          <div class="program-img proL-img" :style="background.an2"></div>
          <div class="program-con proL-con">
            <h3>云鞋网</h3>
            <p>云鞋，是羌族人在喜庆日子里穿的一种自制布鞋，云云鞋”鞋鞋型貌似小船，鞋尖微翘，鞋底较厚，鞋帮上绣有彩色云纹和杜鹃花纹纹样图案，故有“云鞋”、“花鞋”或 “勾尖布鞋...</p>
            <button class="program-btn" title="查看更多">更多</button>
          </div>
        </a>
        <a href="http://huaxingtiyu168.com/" class="item5">
          <div class="program-img proR-img" :style="background.an3"></div>
          <div class="program-con proR-con">
            <h3>华新体育</h3>
            <p>
              华兴体育：不平凡的生活需要好的鞋子来点缀。华兴体育以好的品质、低的价格回馈给大众，丰富的品牌更能满足大家的需求。</p>
            <button class="program-btn" title="查看更多">更多</button>
          </div>
        </a>
      </div>

      <div class="banner6">
        <h2>Honours</h2>
        <hr color="#c00">
        <div class="honour-box">
          <div class="item6 honour">
            <h3>荣誉墙</h3>
            <div class="hon-box">
              <div class="honour-wall">
                <a href="javascript:void(0)" :style="background.a">2016第七届蓝桥杯一等奖</a>
                <a href="javascript:void(0)" :style="background.a">2016“华迪杯”全国大学生计算机设计大赛四川省级赛</a>
                <a href="javascript:void(0)" :style="background.a">2016“华为杯”四川省计算机作品赛</a>
                <a href="javascript:void(0)" :style="background.a">2016第七届蓝桥杯一等奖</a>
                <a href="javascript:void(0)" :style="background.a">2016“华迪杯”全国大学生计算机设计大赛四川省级赛</a>
                <a href="javascript:void(0)" :style="background.a">2016“华为杯”四川省计算机作品赛</a>
              </div>
            </div>
      <!--      <p class="more">展开更多<span>></span><p>-->
            <h3>赛事公告</h3>
            <div>
              <a :style="background.a" href="http://dasai.lanqiao.cn/" title="第八届全国软件和信息技术专业人才大赛">第八届“蓝桥杯”大赛</a>
              <a :style="background.a" href="http://www.jsjds.org">2017“华迪杯”全国大学生计算机设计大赛</a>
              <!-- <a href="javascript:void(0)">2017“华为杯”四川省计算机作品赛</a> -->
            </div>
            <p class="more">展开更多<span>></span></p>
          </div>

          <div class="products">
            <h3>成果展示</h3>
            <a href="http://bluewolfrain.cn/EasyChange/" class="item6">
              <div class="product-img">
                <img src="../assets/picture/yihuan.jpg">
                <div class="product-suggest">
                  <p class="product-name">易换网</p>
                </div>
              </div>
              <div class="product-con">
                <p>依托于NV+设计工作室建立，团队成员由5个具有创新意识、
                  拥有共同目标、有着不同专业知识背景的朝气蓬勃的年轻人组成</p>
              </div>
            </a>
            <a href="http://moxiufe.cn/Projects/asociations/views/homepage.html" class="item6">
              <div class="product-img">
                <img src="../assets/picture/shetuan.png">
                <div class="product-suggest">
                  <p class="product-name">趣社团</p>
                </div>
              </div>
              <div class="product-con">
                <p>趣社团：无社团，不大学。我们可以通过趣社团及时的
                  了解各个社团的活动和相关信息，更方便集中的管理我们的社团。</p>
              </div>
            </a>
            <a href="http://lzsfe.cn/haiyu" class="item6">
              <div class="product-img">
                <img src="../assets/picture/haiyu.jpg">
                <div class="product-suggest">
                  <p class="product-name">嗨语-对外汉语之家</p>
                </div>
              </div>
              <div class="product-con">
                <p>嗨语的顾问团队都是接受2年以上心理课程及专
                  业素养的培训。专门帮助我们的学生规划自己的学习计划，及工作规划</p>
              </div>
            </a>
            <a href="http://121.42.13.137:3000/" class="item6">
              <div class="product-img">
                <img src="../assets/picture/eatgo.png">
                <div class="product-suggest">
                  <p class="product-name">Eat-Go</p>
                </div>
              </div>
              <div class="product-con">
                <p>
                  食在中国,味在四川，风味小吃,冠绝天下。成都美食数不胜数，Eat-Go提供平台让我们更系统的了解成都的美食，分享我们心中的美食。
                </p>
              </div>
            </a>

            <a href="javascript:void(0)" class="item6">
              <div class="product-img">
                <img src="../assets/picture/product.jpg">
              </div>
              <div class="product-con">
                <p>使用最前沿的开发工具，学习最流行的开发技术，观看最高效的视频教程</p>
              </div>
            </a><!-- item6 -->
          </div><!-- products -->
        </div>
      </div>
    </div>
</template>

<script>
  import MHeader from './MHeader'
  import {Bgimg} from '../Bgimg'

  export default {
    name: "index",
    data() {
      return {
        background: {
          demo1: {
            backgroundImage: "url(" + Bgimg['demo-1-bg'] + ")"
          },
          banner2: {
            backgroundImage: "url(" + Bgimg.banner2 + ")"
          },
          "banner2-point": {
            backgroundImage: "url(" + Bgimg.icon + ")"
          },
          a: {
            backgroundImage: "url(" + Bgimg.icon + ")"
          },
          "banner4-bg": {
            backgroundImage: "url(" + Bgimg['banner4-bg'] + ")"
          },
          an2: {
            backgroundImage: "url(" + Bgimg['an2'] + ")"
          },
          an3: {
            backgroundImage: "url(" + Bgimg['an3'] + ")"
          },
          logo: {
            backgroundImage: "url(" + Bgimg['logo'] + ")"
          }
        }
      }
    },
    components: {
      MHeader,
    }
  }
</script>

<style scoped lang="stylus">
  /*bg-banner==========头部背景大图================================*/
  .bg-banner{width:100%;height:700px; background-color:#0e2335;position:relative;background-size:cover;background-position:center center}
  .bg-box{position:absolute;width:1040px;height:400px;left:50%;margin-left:-520px;bottom:130px}
  .bg-content{float:right;width:700px;height:350px;right:200px;bottom:100px;font-family:"微软雅黑";color:#fff}
  .bg-content h1{font-size:50px;font-weight:normal;margin:60px 0 40px}
  .bg-content p{line-height:30px;font-size:14px;padding-left:50px}
  .bg-content a{display:block;margin-top:50px;width:180px;height:50px;border:1px solid #fff;line-height:50px;font-size:20px;text-align:center;color:#fff;margin-left:50px;border-radius:5px;letter-spacing:1px;
    transition:all .3s;-webkit-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s}
  .bg-content a:hover{background-color:#24a9e1;border:1px solid #24a9e1}

  /*logo旋转制作=====================================================*/
  .logo{float:left;width:200px;height:200px;margin-top:100px;margin-left:50px;position:relative;background: no-repeat center center;background-size:cover;}
  .load{position:relative;left:50%;margin-left:-100px;top:50%;margin-top:-150px}
  .hoop1{position: absolute; width: 230px; height: 230px; border: 2px solid rgba(0,0,0,0); border-right: 3px solid #fff; left: -15px; top: -15px; border-radius: 50%; -webkit-animation: myrotate 2s forwards infinite linear; }
  .hoop2{position: absolute; width: 260px; height: 260px; border: 2px solid rgba(0,0,0,0); border-top: 2px solid #24a9e1; left: -30px; top: -30px; border-radius: 50%; -webkit-animation: myrotate 1.5s forwards infinite linear; }
  .hoop3{position: absolute; width: 300px; height: 300px; border: 2px solid rgba(0,0,0,0); border-right: 2px solid yellow; left: -50px; top: -50px; border-radius: 50%; -webkit-animation: myrotate 4s forwards infinite linear; }
  @keyframes myrotate {100% {transform:rotate(360deg); } }
  @-webkit-keyframes myrotate {100% {-webkit-transform:rotate(360deg); } }

  /*banner1===========板块一，各个方向================================*/
  .banner1{padding: 60px 0 80px; text-align: center; }
  h2{width: 400px; margin: 0 auto; font-size: 30px; font-weight: normal; cursor: pointer; text-align: center; color: #333; }
  hr{width: 50px; font-size: 1px ;background: orange;border-style: inset; margin: auto; margin-bottom: 40px; margin-top: 10px; transition: all 1s; -webkit-transition: all .8s ease; -ms-transition: all .8s ease; -o-transition: all .8s ease; -moz-transition: all .8s ease; }
  h2:hover~hr{width: 400px;} hr:hover{width: 400px; }

  .banner1 a{display: inline-block; width: 250px; text-align: center; font-size: 14px; }
  .banner1 a>p{color: #333; font-family: "微软雅黑"; }
  .banner1 a>img{margin-bottom: 10px; }
  /*banner2==============代码图=======================================*/
  .banner2{height: 500px; background-color: #0e2335; background-position: 0 -200px; transition:all 2s; -webkit-transition:all 2s; color: #ccc; font-size: 20px; cursor: pointer; position: relative; }
  .banner2 h2{margin-top: 30px; font-weight: normal; }
  .banner2 pre{width: 720px; margin: 0 auto; padding-top: 60px; }
  .banner2-point{position: absolute; width: 130px; height: 36px; right: 60px; bottom: 40px; border-top: 1px solid #999; border-bottom: 1px solid #999; font-size: 14px; color: #999; padding: 2px 0; background:  no-repeat 105px -38px; }
  .banner2-point p{line-height: 18px; text-indent: 10px; }

  /*banner3======资源分享、开发工具、网站===================================*/
  .banner3{padding-bottom: 50px; background: #f2f2f2; padding-top: 50px; text-align: center; }
  .banner3 p{text-align: center; font-size: 15px; line-height: 30px; color: #666; }
  .banner3 h2:hover~hr{width: 280px; }
  .banner3 hr:hover{width: 280px; }
  .banner3 .item{display: inline-block; width: 280px; border-right: 1px solid #ccc; overflow: hidden;white-space: nowrap; padding: 0 15px 10px 30px; }
  .banner3 .item>a{margin: 30px 0;text-overflow: ellipsis;overflow: hidden; text-align: left; display: block; height: 30px; line-height: 30px; font-size: 14px; color: #999; padding-top: 3px; }
  .banner3 .item>a.sublime{text-indent: 35px; background:  no-repeat 0px -93px; }
  .banner3 .item>a.android{text-indent: 35px; background:  no-repeat 0px -139px; }
  .banner3 .item>a.unity{text-indent: 95px; background:  no-repeat 0px -182px; }
  .banner3 .item>a.imooc{text-indent: 110px; background:  no-repeat 0px -228px; }
  .banner3 .item>a.jkxy{text-indent: 90px; background:  no-repeat 0px -270px; }
  .banner3 .item>a.manew{text-indent: 140px; background:  no-repeat 0px -317px; }
  .banner3 .item>a.github{text-indent: 37px; background:  no-repeat 0px -397px; }
  .banner3 .item>a.youdao{text-indent: 125px; background:  no-repeat 0px -441px; }
  .banner3 .item>a.ps{text-indent: 37px; background:  no-repeat 0px -484px; }
  .banner3 .item>a:hover{text-decoration: underline; color: #c93949; }

  /*banner4====================================================*/
  .banner4{height: 200px; background-position: 50% 50%; background-size: cover; text-align: center; }
  .banner4 a{display: inline-block; width: 150px; height: 40px; margin-top: 50px; text-align: center; color: #fff; font-size: 16px; line-height: 40px; border: 1px solid #fff; border-radius: 5px; transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -moz-transition: all .3s; }
  .banner4 a:hover{transform: scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); }
  .banner4 p{color: #fff; font-size: 14px; line-height: 25px; margin-top: 10px; }

  /*banner5=================项目展示===========================*/
  .banner5{background: #fff; padding: 50px 0; }
  .banner5 h2:hover~hr{width: 280px; }
  .banner5 hr:hover{width: 280px; }
  .item5{display: block; width: 800px; height: 200px; background: #f2f2f2; margin: 0 auto; margin-bottom: 20px; }
  .program-img{width: 250px; height: 100%; }
  .program-img.proL-img{ float: left; }
  .program-img.proR-img{ float: right; }
  .program-con{width: 490px; padding: 15px 30px; height: 170px; position: relative; }
  .program-con.proL-con{float: left; }
  .program-con.proR-con{float: right; }
  .program-con h3{color: #555; font-size: 18px; margin-bottom: 20px; }
  .program-con p{color: #999; font-size: 14px; margin-bottom: 20px; text-indent: 2em; line-height: 22px; }
  .program-btn{position: absolute; color: #999; border-radius: 3px; padding: 5px 10px; border: 1px solid #ccc; right: 20px; bottom: 10px; cursor: pointer; background: none; transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -moz-transition: all .3s; }
  .program-btn:hover{background: #ccc; color: #666; }

  /*banner6======荣誉、成果展示==================================*/
  .banner6{padding: 50px 0; background: #f2f2f2; }
  .banner6 h2:hover~hr{width: 280px; }
  .banner6 hr:hover{width: 280px; }
  .honour-box{width: 1000px; overflow: hidden; margin: 0 auto; }
  .honour-box h3{line-height: 50px; font-size: 18px; color: #444; font-family: "宋体"}
  .hon-box{height: 120px; overflow: hidden; }
  .item6{width: 220px; min-height: 200px; padding: 0 15px; float: left; margin-bottom: 30px; }
  .item6.honour{margin-left: -1px; border-right: 1px solid #ccc; padding-bottom: 20px; }
  .item6.honour a{display: block;text-overflow:ellipsis; white-space: nowrap; overflow: hidden; line-height: 25px; color: #333; width: 214px; text-indent: 30px; padding-top: 2px; margin-top: 3px; transition: all .3s; background: no-repeat 0px -363px; }
  .item6.honour a:hover{background-color: #fff; box-shadow: 0 0 10px #444; transform: translateY(-2px); }
  .item6.honour .more{text-align: right; background: none; color: #999; line-height: 40px; cursor: pointer; transition: all .3s; width: 216px; }
  .item6.honour .more>span{display: block; float: right; margin-left: 3px; -webkit-transform:rotate(90deg) }
  .item6.honour .more:hover{color: #333; }
  .products{float: right; width: 750px; margin-right: -15px; }
  .products h3{text-indent: 15px; }
  .products .item6{height: 240px; overflow: hidden; background: #fff; padding: 0; margin: 0 15px 30px 15px; transition: all .3s; }
  .products .item6:hover{box-shadow: 0 0 20px #999; }
  .product-con{padding: 5px 10px; line-height: 22px; color: #666; margin-top: -3px; }
  .product-img{overflow: hidden; position: relative; }
  .product-img img{transition: all .5s; }
  .products .item6:hover img{transform: scale(1.2,1.2); }
  .product-suggest{width: 100%; height: 50px; background: #fff; position: absolute; bottom: -50px; transition: all .5s; }
  .product-name{line-height: 50px; text-indent: 10px; font-size: 16px; font-weight: bold; color: #444; }
  .products .item6:hover .product-suggest{bottom: 0; }

</style>
